<template>
	<view class="certificate-detail-container">
		<view class="certificate-detail-list">
			<view class="certificate-detail-item">
				<view class="item-label">证书类型</view>
				<view class="item-content">{{ certificateDetail.name }}</view>
			</view>
			<view class="certificate-detail-item">
				<view class="item-label">证书编号</view>
				<view class="item-content">{{ certificateDetail.number }}</view>
			</view>
			<view class="certificate-detail-item">
				<view class="item-label">职业技能等级</view>
				<view class="item-content"></view>
			</view>
			<view class="certificate-detail-item">
				<view class="item-label">证书颁发机构</view>
				<view class="item-content"></view>
			</view>
			<view class="certificate-detail-item">
				<view class="item-label">是否永久有效</view>
				<view class="item-content">{{ certificateDetail.isPermanent ? '是' : '否' }}</view>
			</view>
			<view class="certificate-detail-item">
				<view class="item-label">发证日期</view>
				<view class="item-content">{{ certificateDetail.issuedAtData }}</view>
			</view>
			<view class="certificate-detail-item" v-if="!certificateDetail.isPermanent">
				<view class="item-label">到期日期</view>
				<view class="item-content">{{ certificateDetail.expiredAtData }}</view>
			</view>
			<view class="certificate-detail-vertical">
				<view class="item-label">证书图片</view>
				<view class="pic-list">
					<preview-image
						:avatar="item"
						:imageList="certificateDetail.images"
						previewClass="pic"
						v-for="(item, index) in certificateDetail.images"
						:key="index"
					></preview-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import previewImage from '@/pagesA/components/common/preview-image/preview-image';
const app = getApp();
export default {
	components: {
		previewImage
	},
	data() {
		return {
			certificateDetail: {
				name: '',
				number: '',
				isPermanent: false,
				issuedAtData: '',
				expiredAtData: '',
				images: ''
			}
		};
	},
	onLoad(options) {},
	onShow() {
		if (app.globalData.hasCertificateDetail) {
			this.setData({
				certificateDetail: app.globalData.certificateDetail
			});
			delete app.globalData.hasCertificateDetail;
			delete app.globalData.certificateDetail;
		}
	},
	methods: {}
};
</script>
<style>
.certificate-detail-container {
	height: 100vh;
	background-color: #f6f7fa;
}

.certificate-detail-list {
	background-color: #fff;
	padding: 0 32rpx;
}

.certificate-detail-item {
	display: flex;
	border-bottom: 1rpx solid #e1e2e7;
	padding: 28rpx 0;
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
}

.item-label {
	color: #4b5680;
	margin-right: 32rpx;
	flex-shrink: 0;
}

.item-content {
	flex: 1;
	color: #1e253f;
	text-align: right;
	word-break: break-all;
}

.certificate-detail-vertical .item-label {
	margin-right: 0;
	margin-top: 28rpx;
}

.pic-list {
	display: flex;
	align-items: center;
	padding-bottom: 28rpx;
}

.pic-list .pic {
	width: 200rpx;
	height: 150rpx;
	background-color: #f6f7fa;
	border-radius: 6rpx;
	margin-top: 28rpx;
	margin-right: 24rpx;
}
</style>
